<template>
  <view class="search-page">
    <uni-page-header title="搜索" />
    <view class="search-header">
      <view class="input-wrap">
        <u-search
          v-model="keyword"
          round
          height="60rpx"
          clearabled
          :show-action="false"
          bg-color="transparent"
          placeholder="话题/护发知识"
          style="flex: 1;"
          @search="onSearch"
        />
        <view class="search-btn" @click="onSearch">
          <u-button shape="circle" text="搜索" color="#78ffe6" size="mini" />
        </view>
      </view>
    </view>
    <History v-if="!isSearched" @keyword:update="onKeywordUpdate" />
    <view v-else class="list-wrap">
      <view v-if="isEmpty" class="empty-wrap">
        <u-empty mode="search" text="没有找到相关结果，换个关键字试试吧" margin-top="50" />
      </view>

      <view v-else>
        <WaterfallList :outside-list="resultList" />
      </view>
    </view>
  </view>
</template>

<script>
import {
  getImg
} from '../utils/index'
import {
  wx_search_keyword_data
} from '../api/index'
import History from './components/History.vue'
import WaterfallList from '../pages/components/diary/WaterfallList.vue'
export default {
  name: 'SearchIndex',
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared'
  },
  // #endif
  components: {
    History,
    WaterfallList
  },
  data() {
    return {
      keyword: '',
      resultList: [],
      isSearched: false,
      isEmpty: false
    }
  },

  methods: {
    async onSearch() {
      if (this.keyword === '') {
        this.$utils.showToast('请输入搜索内容')
        return
      }
      this.isSearched = true
      const {
        post_list
      } = await wx_search_keyword_data({
        keyword: this.keyword
      })
      // console.log('搜索结果')
      // console.log(post_list)
      this.resultList = post_list.map(e => {
        this.$set(e, 'image', getImg(e.image))
        return e
      })
      this.isEmpty = post_list.length === 0
      console.log('搜索结果')
      console.log(this.resultList)
    },
    onKeywordUpdate(value = '') {
      this.keyword = value
      this.onSearch()
    },
    getListData() {}
  }
}
</script>

<style lang="scss" scoped>
	.search-page {
		.search-header {
			height: 90rpx;
			padding: 0 25rpx;
			background-color: #FFF;

			.input-wrap {
				@include flex-between;
				border-radius: 50rpx;
				border: 1px solid #e6e6e6;
				padding-right: 10rpx;

				.search-btn {
					width: 100rpx;
					height: 28px;

					::v-deep.u-button {
						width: 100%;
						height: 100%;

						.u-button__text {
							font-size: 28rpx !important;
						}
					}
				}
			}
		}
	}
</style>
